<script setup>

import moduleJson from "@/components/page/moduleJson"
import dataJson from "@/components/page/dataJson"
import {inject, nextTick, onActivated, onMounted, reactive, ref, toRaw, toRefs, unref} from "vue";
import {CloseBold, Delete, EditPen, Plus} from "@element-plus/icons-vue";
import ChatService from "@/service/impl/ChatService.js";
import ChatWindow from "@/components/chat/ChatWindow.vue";
import ChatFileList from "@/components/chat/ChatFileList.vue";
import ChatTitleList from "@/components/chat/ChatTitleList.vue";
import ChatModel from "@/model/ChatModel.js";
import AgentsInfoModel from "@/model/AgentsInfoModel.js";


const t = inject('$t')
const message = inject('message')
const data = dataJson()
const module = moduleJson()
const agentsInfoModel = ref(new AgentsInfoModel())
const pageTable = ref()
const url = window.webConfig.apiUrl()
const chatTitleList = ref(null)
const chatFileList = ref(null)
const chatWindow = ref(null)
const select = ref({
    id: null
})

const init = () => {
    ChatService.agentsList({}).then(res => {
        data.value.list = res.data
        nextTick(() => {
            onTitleRefresh()
            onModelChange()
        })
    })
}

const onModelChange = () => {
    agentsInfoModel.value = data.value.list.find(item => item.id === select.value.id)
    clearContext({},true)
}
const onSelect = (item) => {
    select.value.id = item.agentsId
    agentsInfoModel.value = data.value.list.find(i => i.id === item.agentsId)
    chatWindow.value.onSelect(item)
}
const clearContext = (item,all) => {
    chatWindow.value.onClear(item,all)
}
const onTitleRefresh = (item) => {
    chatTitleList.value.init(item)
}
const activated = () => {
    ChatService.agentsList({}).then(res => {
        data.value.list = res.data
    })
}
const onNewChat = () => {
    chatWindow.value.onClear({},true)
}

onMounted(() => {
    module.value.layout = {
        tableLeft: true,
        width: "220px",
        table: false,
        page: false,
    }
    module.value.page = false
    module.value.init(null, null,
        ChatService.url.modeDel, null, null)
    module.value.dialog.width = "40%"
    init()
})

</script>
<template>
    <Page
        @refresh="init"
        :data="data"
        :module="module"
        ref="pageTable"
        @on-show="activated"
    >
        <template #table>
            <chat-window class="main" ref="chatWindow" :agents="agentsInfoModel" @on-title-refresh="onTitleRefresh" />
        </template>
        <template #table-left>
            <chat-title-list ref="chatTitleList" @onSelect="onSelect" @onClose="clearContext"/>
        </template>
        <template #operate-before>
            <el-button type="primary" @click="onNewChat">新建对话</el-button>
            <el-select v-model="select.id"  style="width: 200px;margin:0 15px 0 15px"
                       @change="onModelChange">
<!--                <template #header class="easyai-header">-->
<!--                    <el-option-->
<!--                        class="easyai"-->
<!--                        v-for="item in data.list.filter(i => i.id === 1)"-->
<!--                        :key="item.id"-->
<!--                        :label="item.chatName"-->
<!--                        :value="item.id"-->
<!--                    />-->
<!--                </template>-->
                <el-option
                    v-for="item in data.list"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                />
            </el-select>
        </template>
        <template #table-column>
        </template>
        <template #after-table-event="row">
        </template>
        <template #table-dialog>

        </template>
        <template #table-search>

        </template>

    </Page>

</template>

<style lang="scss" scoped>
.main{
    width: 100%;
    height: 100%;
}
.easyai{
    list-style-type: none;
    padding-left: 8px;
}
</style>
